﻿<template>
  <el-collapse accordion value = 'basicConfig' v-if = 'formItemConfig && Object.keys(formItemConfig).length' class = 'bi_configCollapse'>
    <el-collapse-item title = '基础配置' name = 'basicConfig'>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>数据model</p>
        <el-input v-model = "formItemConfig.model"></el-input>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>组件名称</p>
        <el-input v-model = "formItemConfig.name"></el-input>
      </div>
      <template v-if = "formItemConfig.type === 'table'">
        <div class = 'biConfig_item'>
          <p class = 'biConfig_item_label'>表格高度</p>
          <el-input-number v-model = "formItemConfig.options.height" :min = '50' :step = "10"></el-input-number>
        </div>
      </template>
      <template v-if = "formItemConfig.type.indexOf('echarts_') !== -1">
        <div class = 'biConfig_item'>
          <p class = 'biConfig_item_label'>组件高度</p>
          <el-input-number v-model = "formItemConfig.options.height" :min = '50' :step = "10"></el-input-number>
        </div>
        <div class = 'biConfig_item'>
          <p class = 'biConfig_item_label'>图标离容器上侧的距离</p>
          <el-input v-model = "formItemConfig.dataOptions.grid.top"></el-input>
        </div>
        <div class = 'biConfig_item'>
          <p class = 'biConfig_item_label'>图标离容器右侧的距离</p>
          <el-input v-model = "formItemConfig.dataOptions.grid.right"></el-input>
        </div>
        <div class = 'biConfig_item'>
          <p class = 'biConfig_item_label'>图标离容器下侧的距离</p>
          <el-input v-model = "formItemConfig.dataOptions.grid.bottom"></el-input>
        </div>
        <div class = 'biConfig_item'>
          <p class = 'biConfig_item_label'>图标离容器左侧的距离</p>
          <el-input v-model = "formItemConfig.dataOptions.grid.left"></el-input>
        </div>
        <div class = 'biConfig_item'>
          <p class = 'biConfig_item_label'>tooltip格式化</p>
          <el-input v-model = "formItemConfig.dataOptions.tooltip.formatter"></el-input>
        </div>
        <div class = 'biConfig_item' v-if = "formItemConfig.type === 'echarts_bar'">
          <p class = 'biConfig_item_label'>是否为条形柱状图</p>
          <div><el-switch @change = 'barTypeChange' v-model = "formItemConfig.isVerticalBar"></el-switch></div>
        </div>
      </template>
    </el-collapse-item>
    <!-- 栅格布局 -->
    <el-collapse-item title = '栅格布局配置' name = 'gridConfig' v-if = "formItemConfig.type === 'grid'">
      <div class = 'biConfig_item'>
        <div class = 'biConfig_itemFlex'>
          <div class = 'biConfig_itemFlex_btn'>
            <el-button type = "primary" size = 'mini' @click = "handleAddColumn">
              <i class = 'iconfont icon-add'></i>添加列
            </el-button>
          </div>
          <p class = 'biConfig_item_label'>列表配置项</p>
        </div>
        <ul class = 'biConfig_columns'>
          <li v-for = "(item, index) in formItemConfig.columns" :key = "index" >
            <div class = 'biConfig_columns_btn'>
              <el-button @click = "handleOptionsRemove(index)" circle plain type = "danger"
              title = '移除当前列' size = "mini" icon = "iconfont icon-shanchu"></el-button>
            </div>
            <div class = 'biConfig_columns_input'>
              <el-input-number @change = 'gridSpanChange' v-model = "item.span" :min = '1' :max = '24' :step = "1"></el-input-number>
            </div>
          </li>
        </ul>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>栅格间隔</p>
        <el-input-number v-model = "formItemConfig.options.gutter" :min = '0' :step = "1"></el-input-number>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>水平排列方式</p>
        <el-select v-model = "formItemConfig.options.justify">
          <el-option value = "start" label = "左对齐"></el-option>
          <el-option value = "end" label = "右对齐"></el-option>
          <el-option value = "center" label = "居中"></el-option>
          <el-option value = "space-around" label = "两侧间隔相等"></el-option>
          <el-option value = "space-between" label = "两端对齐"></el-option>
        </el-select>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>垂直排列方式</p>
        <el-select v-model = "formItemConfig.options.align">
          <el-option value = "top" label = "顶部对齐"></el-option>
          <el-option value = "middle" label = "居中"></el-option>
          <el-option value = "bottom" label = "底部对齐"></el-option>
        </el-select>
      </div>
    </el-collapse-item>
    <el-collapse-item title = 'tabs配置' name = 'tabsConfig' v-if = "formItemConfig.type === 'tabs'">
      <div class = 'biConfig_item'>
        <div class = "addColumn">
          <p @click = "handleAddOption"> <i class = "iconfont icon-add"></i>添加tab页</p>
        </div>
        <el-table :data = 'formItemConfig.tabList' style = "width:100%" empty-text = "暂无tab页数据，请添加" border stripe>
          <el-table-column align = "center" prop = 'label' label = 'tab页名称'>
            <template slot-scope = "scope">
              <el-input v-model = "scope.row.label" placeholder = '请输入'></el-input>
            </template>
          </el-table-column>
          <el-table-column align = "center" label = "操作" width = "30">
            <template slot-scope = "scope">
              <el-button type = "text" size = "mini" @click = "handleOptionsRemove(scope.$index)" title = '移除'>
                <i class = "iconfont icon-shanchu"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>标签的宽度是否自撑开</p>
        <div><el-switch v-model = "formItemConfig.options.stretch"></el-switch></div>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>风格类型</p>
        <el-select v-model = "formItemConfig.options.tabType">
          <el-option value = "border-card" label = "border-card"></el-option>
          <el-option value = "card" label = "card"></el-option>
        </el-select>
      </div>
    </el-collapse-item>
    <el-collapse-item title = '标题部分' name = 'titleConfig' v-if = "formItemConfig.type.indexOf('echarts_') !== -1">
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>是否显示标题</p>
        <div><el-switch v-model = "formItemConfig.dataOptions.title.show"></el-switch></div>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>标题名称</p>
        <el-input v-model = "formItemConfig.dataOptions.title.text"></el-input>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>标题离容器左侧的距离</p>
        <el-input v-model = "formItemConfig.dataOptions.title.left"></el-input>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>标题离容器上侧的距离</p>
        <el-input v-model = "formItemConfig.dataOptions.title.top"></el-input>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>标题字体大小</p>
        <el-input-number v-model = "formItemConfig.dataOptions.title.textStyle.fontSize" :min = '12' :max = '32' :step = "1"></el-input-number>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>标题颜色</p>
        <el-color-picker v-model = "formItemConfig.dataOptions.title.textStyle.color"></el-color-picker>
      </div>
    </el-collapse-item>
    <el-collapse-item title = '图例部分' name = 'legendConfig' v-if = "formItemConfig.type.indexOf('echarts_') !== -1">
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>是否显示图例</p>
        <div><el-switch v-model = "formItemConfig.dataOptions.legend.show"></el-switch></div>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>图例列表的朝向</p>
        <el-select v-model = "formItemConfig.dataOptions.legend.orient" placeholder = '请选择图例列表的朝向'>
          <el-option label = '垂直' value = 'vertical'></el-option>
          <el-option label = '水平' value  = 'horizontal'></el-option>
        </el-select>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>图例离容器左侧的距离</p>
        <el-input v-model = "formItemConfig.dataOptions.legend.left"></el-input>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>图例离容器上侧的距离</p>
        <el-input v-model = "formItemConfig.dataOptions.legend.top"></el-input>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>图例宽度</p>
        <el-input-number v-model = "formItemConfig.dataOptions.legend.itemWidth" :min = '1' :step = "1"></el-input-number>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>图例高度</p>
        <el-input-number v-model = "formItemConfig.dataOptions.legend.itemHeight" :min = '1' :step = "1"></el-input-number>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>图例类型</p>
        <el-select v-model = "formItemConfig.dataOptions.legend.icon" placeholder = '请选择图例类型'>
          <el-option label = 'circle' value = 'circle'></el-option>
          <el-option label = 'rect' value  = 'rect'></el-option>
          <el-option label = 'roundRect' value  = 'roundRect'></el-option>
          <el-option label = 'triangle' value  = 'triangle'></el-option>
          <el-option label = 'roundRect' value  = 'roundRect'></el-option>
          <el-option label = 'diamond' value  = 'diamond'></el-option>
          <el-option label = 'pin' value  = 'pin'></el-option>
          <el-option label = 'arrow' value  = 'arrow'></el-option>
          <el-option label = 'none' value  = 'none'></el-option>
          <el-option label = 'emptyCircle' value  = 'emptyCircle'></el-option>
        </el-select>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>图例字体大小</p>
        <el-input-number v-model = "formItemConfig.dataOptions.legend.textStyle.fontSize" :min = '12' :max = '32' :step = "1"></el-input-number>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>图例字体颜色</p>
        <el-color-picker v-model = "formItemConfig.dataOptions.legend.textStyle.color"></el-color-picker>
      </div>
    </el-collapse-item>
    <el-collapse-item title = 'X坐标轴' name = 'xAxisConfig'
    v-if = "formItemConfig.type === 'echarts_line' || formItemConfig.type === 'echarts_bar'">
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>是否显示X坐标轴刻度</p>
        <div><el-switch v-model = "formItemConfig.dataOptions.xAxis.axisLabel.show"></el-switch></div>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>X坐标轴刻度格式化</p>
        <el-input v-model = "formItemConfig.dataOptions.xAxis.axisLabel.formatter"></el-input>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>X坐标轴刻度字体大小</p>
        <el-input-number v-model = "formItemConfig.dataOptions.xAxis.axisLabel.textStyle.fontSize" :min = '12' :max = '32' :step = "1"></el-input-number>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>X坐标轴刻度字体颜色</p>
        <el-color-picker v-model = "formItemConfig.dataOptions.xAxis.axisLabel.textStyle.color"></el-color-picker>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>是否显示X坐标轴</p>
        <div><el-switch v-model = "formItemConfig.dataOptions.xAxis.show"></el-switch></div>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>X坐标轴名称</p>
        <el-input v-model = "formItemConfig.dataOptions.xAxis.name"></el-input>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>X坐标轴名称字体大小</p>
        <el-input-number v-model = "formItemConfig.dataOptions.xAxis.nameTextStyle.fontSize" :min = '12' :max = '32' :step = "1"></el-input-number>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>X坐标轴名称字体颜色</p>
        <el-color-picker v-model = "formItemConfig.dataOptions.xAxis.nameTextStyle.color"></el-color-picker>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>X坐标轴名称与轴线距离</p>
        <el-input-number v-model = "formItemConfig.dataOptions.xAxis.nameGap" :min = '0' :step = "1"></el-input-number>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>X坐标轴名称位置</p>
        <el-select v-model = "formItemConfig.dataOptions.xAxis.nameLocation" placeholder = '请选择X坐标轴名称位置'>
          <el-option label = 'end' value = 'end'></el-option>
          <el-option label = 'center' value  = 'center'></el-option>
          <el-option label = 'start' value  = 'start'></el-option>
        </el-select>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>X坐标轴名称旋转角度</p>
        <el-input-number v-model = "formItemConfig.dataOptions.xAxis.nameRotate" :min = '-90' :max = '90' :step = "1"></el-input-number>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>是否显示X坐标轴线</p>
        <div><el-switch v-model = "formItemConfig.dataOptions.xAxis.axisLine.show"></el-switch></div>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>X坐标轴线线条宽度</p>
        <el-input-number v-model = "formItemConfig.dataOptions.xAxis.axisLine.lineStyle.width" :min = '1' :step = "1"></el-input-number>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>X坐标轴线线条颜色</p>
        <el-color-picker v-model = "formItemConfig.dataOptions.xAxis.axisLine.lineStyle.color"></el-color-picker>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>X坐标轴线线条类型</p>
        <el-select v-model = "formItemConfig.dataOptions.xAxis.axisLine.lineStyle.type" placeholder = '请选择X坐标轴线线条类型'>
          <el-option label = 'solid' value = 'solid'></el-option>
          <el-option label = 'dashed' value  = 'dashed'></el-option>
          <el-option label = 'dotted' value  = 'dotted'></el-option>
        </el-select>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>是否显示X坐标轴分隔线</p>
        <div><el-switch v-model = "formItemConfig.dataOptions.xAxis.splitLine.show"></el-switch></div>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>X坐标轴线分隔线宽度</p>
        <el-input-number v-model = "formItemConfig.dataOptions.xAxis.splitLine.lineStyle.width" :min = '1' :step = "1"></el-input-number>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>X坐标轴线分隔线颜色</p>
        <el-color-picker v-model = "formItemConfig.dataOptions.xAxis.splitLine.lineStyle.color"></el-color-picker>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>X坐标轴线分隔线类型</p>
        <el-select v-model = "formItemConfig.dataOptions.xAxis.splitLine.lineStyle.type" placeholder = '请选择X坐标轴分隔线类型'>
          <el-option label = 'solid' value = 'solid'></el-option>
          <el-option label = 'dashed' value  = 'dashed'></el-option>
          <el-option label = 'dotted' value  = 'dotted'></el-option>
        </el-select>
      </div>
    </el-collapse-item>
    <el-collapse-item title = 'Y坐标轴' name = 'yAxisConfig'
    v-if = "formItemConfig.type === 'echarts_line' || formItemConfig.type === 'echarts_bar'">
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>是否显示Y坐标轴刻度</p>
        <div><el-switch v-model = "formItemConfig.dataOptions.yAxis.axisLabel.show"></el-switch></div>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>Y坐标轴刻度格式化</p>
        <el-input v-model = "formItemConfig.dataOptions.yAxis.axisLabel.formatter"></el-input>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>Y坐标轴刻度字体大小</p>
        <el-input-number v-model = "formItemConfig.dataOptions.yAxis.axisLabel.textStyle.fontSize" :min = '12' :max = '32' :step = "1"></el-input-number>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>Y坐标轴刻度字体颜色</p>
        <el-color-picker v-model = "formItemConfig.dataOptions.yAxis.axisLabel.textStyle.color"></el-color-picker>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>是否显示Y坐标轴</p>
        <div><el-switch v-model = "formItemConfig.dataOptions.yAxis.show"></el-switch></div>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>Y坐标轴名称</p>
        <el-input v-model = "formItemConfig.dataOptions.yAxis.name"></el-input>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>Y坐标轴名称字体大小</p>
        <el-input-number v-model = "formItemConfig.dataOptions.yAxis.nameTextStyle.fontSize" :min = '12' :max = '32' :step = "1"></el-input-number>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>Y坐标轴名称字体颜色</p>
        <el-color-picker v-model = "formItemConfig.dataOptions.yAxis.nameTextStyle.color"></el-color-picker>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>Y坐标轴名称与轴线距离</p>
        <el-input-number v-model = "formItemConfig.dataOptions.yAxis.nameGap" :min = '0' :step = "1"></el-input-number>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>Y坐标轴名称位置</p>
        <el-select v-model = "formItemConfig.dataOptions.yAxis.nameLocation" placeholder = '请选择Y坐标轴名称位置'>
          <el-option label = 'end' value = 'end'></el-option>
          <el-option label = 'center' value  = 'center'></el-option>
          <el-option label = 'start' value  = 'start'></el-option>
        </el-select>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>Y坐标轴名称旋转角度</p>
        <el-input-number v-model = "formItemConfig.dataOptions.yAxis.nameRotate" :min = '-90' :max = '90' :step = "1"></el-input-number>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>是否显示Y坐标轴线</p>
        <div><el-switch v-model = "formItemConfig.dataOptions.yAxis.axisLine.show"></el-switch></div>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>Y坐标轴线线条宽度</p>
        <el-input-number v-model = "formItemConfig.dataOptions.yAxis.axisLine.lineStyle.width" :min = '1' :step = "1"></el-input-number>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>Y坐标轴线线条颜色</p>
        <el-color-picker v-model = "formItemConfig.dataOptions.yAxis.axisLine.lineStyle.color"></el-color-picker>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>Y坐标轴线线条类型</p>
        <el-select v-model = "formItemConfig.dataOptions.yAxis.axisLine.lineStyle.type" placeholder = '请选择Y坐标轴线线条类型'>
          <el-option label = 'solid' value = 'solid'></el-option>
          <el-option label = 'dashed' value  = 'dashed'></el-option>
          <el-option label = 'dotted' value  = 'dotted'></el-option>
        </el-select>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>是否显示Y坐标轴分隔线</p>
        <div><el-switch v-model = "formItemConfig.dataOptions.yAxis.splitLine.show"></el-switch></div>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>Y坐标轴线分隔线宽度</p>
        <el-input-number v-model = "formItemConfig.dataOptions.yAxis.splitLine.lineStyle.width" :min = '1' :step = "1"></el-input-number>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>Y坐标轴线分隔线颜色</p>
        <el-color-picker v-model = "formItemConfig.dataOptions.yAxis.splitLine.lineStyle.color"></el-color-picker>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>Y坐标轴线分隔线类型</p>
        <el-select v-model = "formItemConfig.dataOptions.yAxis.splitLine.lineStyle.type" placeholder = '请选择Y坐标轴分隔线类型'>
          <el-option label = 'solid' value = 'solid'></el-option>
          <el-option label = 'dashed' value  = 'dashed'></el-option>
          <el-option label = 'dotted' value  = 'dotted'></el-option>
        </el-select>
      </div>
    </el-collapse-item>
    <el-collapse-item title = '系列设置' name = 'dataConfig'
    v-if = "formItemConfig.type === 'echarts_line' || formItemConfig.type === 'echarts_bar'">
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>选择系列</p>
        <el-select v-model = "currentSeriesIndex">
          <el-option v-for = "(item, index) in formItemConfig.dataOptions.series" :key = 'index'
          :label = 'item.name' :value = 'index'></el-option>
        </el-select>
      </div>
      <template v-if = "formItemConfig.dataOptions.series[currentSeriesIndex]">
        <div class = 'biConfig_item'>
          <p class = 'biConfig_item_label'>图形颜色</p>
          <el-color-picker v-model = "formItemConfig.dataOptions.series[currentSeriesIndex].itemStyle.color"></el-color-picker>
        </div>
        <!-- 折线图特有 -->
        <template v-if = "formItemConfig.dataOptions.series[currentSeriesIndex].type === 'line'">
          <div class = 'biConfig_item'>
            <p class = 'biConfig_item_label'>图形区域颜色</p>
            <el-color-picker v-model = "formItemConfig.dataOptions.series[currentSeriesIndex].areaStyle.color"></el-color-picker>
          </div>
          <div class = 'biConfig_item'>
            <p class = 'biConfig_item_label'>图形区域颜色透明度</p>
            <el-input-number v-model = "formItemConfig.dataOptions.series[currentSeriesIndex].areaStyle.opacity"
            :min = '0' :max = '1' :step = "0.1" :precision = '1'></el-input-number>
          </div>
          <div class = 'biConfig_item'>
            <p class = 'biConfig_item_label'>图形标记大小</p>
            <el-input-number v-model = "formItemConfig.dataOptions.series[currentSeriesIndex].symbolSize"
            :min = '0' :step = "1"></el-input-number>
          </div>
          <div class = 'biConfig_item'>
            <p class = 'biConfig_item_label'>图形标记类型</p>
            <el-select v-model = "formItemConfig.dataOptions.series[currentSeriesIndex].symbol">
              <el-option label = 'circle' value = 'circle'></el-option>
              <el-option label = 'rect' value  = 'rect'></el-option>
              <el-option label = 'roundRect' value  = 'roundRect'></el-option>
              <el-option label = 'triangle' value  = 'triangle'></el-option>
              <el-option label = 'roundRect' value  = 'roundRect'></el-option>
              <el-option label = 'diamond' value  = 'diamond'></el-option>
              <el-option label = 'pin' value  = 'pin'></el-option>
              <el-option label = 'arrow' value  = 'arrow'></el-option>
              <el-option label = 'none' value  = 'none'></el-option>
              <el-option label = 'emptyCircle' value  = 'emptyCircle'></el-option>
            </el-select>
          </div>
        </template>
        <!-- 柱状图特有 -->
        <template v-if = "formItemConfig.dataOptions.series[currentSeriesIndex].type === 'bar'">
          <div class = 'biConfig_item'>
            <p class = 'biConfig_item_label'>柱条的宽度</p>
            <el-input v-model = "formItemConfig.dataOptions.series[currentSeriesIndex].barWidth"></el-input>
          </div>
          <div class = 'biConfig_item'>
            <p class = 'biConfig_item_label'>不同系列的柱间距离</p>
            <el-input v-model = "formItemConfig.dataOptions.series[currentSeriesIndex].barGap"></el-input>
          </div>
          <div class = 'biConfig_item'>
            <p class = 'biConfig_item_label'>同一系列的柱间距离</p>
            <el-input v-model = "formItemConfig.dataOptions.series[currentSeriesIndex].barCategoryGap"></el-input>
          </div>
          <div class = 'biConfig_item'>
            <p class = 'biConfig_item_label'>堆叠柱状图名称</p>
            <el-input v-model = "formItemConfig.dataOptions.series[currentSeriesIndex].stack"></el-input>
          </div>
        </template>
        <div class = 'biConfig_item'>
          <p class = 'biConfig_item_label'>是否显示label</p>
          <div><el-switch v-model = "formItemConfig.dataOptions.series[currentSeriesIndex].label.show"></el-switch></div>
        </div>
        <div class = 'biConfig_item'>
          <p class = 'biConfig_item_label'>label字体大小</p>
          <el-input-number v-model = "formItemConfig.dataOptions.series[currentSeriesIndex].label.fontSize"
          :min = '12' :max = '32' :step = "1"></el-input-number>
        </div>
        <div class = 'biConfig_item'>
          <p class = 'biConfig_item_label'>label字体颜色</p>
          <el-color-picker v-model = "formItemConfig.dataOptions.series[currentSeriesIndex].label.color"></el-color-picker>
        </div>
        <div class = 'biConfig_item'>
          <p class = 'biConfig_item_label'>label格式化</p>
          <el-input v-model = "formItemConfig.dataOptions.series[currentSeriesIndex].label.formatter"></el-input>
        </div>
        <div class = 'biConfig_item'>
          <p class = 'biConfig_item_label'>label位置</p>
          <el-select v-model = "formItemConfig.dataOptions.series[currentSeriesIndex].label.position">
            <el-option label = 'top' value = 'top'></el-option>
            <el-option label = 'bottom' value = 'bottom'></el-option>
            <el-option label = 'left' value = 'left'></el-option>
            <el-option label = 'right' value = 'right'></el-option>
            <el-option label = 'inside' value = 'inside'></el-option>
            <el-option label = 'insideLeft' value = 'insideLeft'></el-option>
            <el-option label = 'insideRight' value = 'insideRight'></el-option>
            <el-option label = 'insideTop' value = 'insideTop'></el-option>
            <el-option label = 'insideBottom' value = 'insideBottom'></el-option>
          </el-select>
        </div>
        <div class = 'biConfig_item'>
          <p class = 'biConfig_item_label'>label距离元素的距离</p>
          <el-input-number v-model = "formItemConfig.dataOptions.series[currentSeriesIndex].label.distance"
          :min = '0' :step = "1"></el-input-number>
        </div>
        <div class = 'biConfig_item'>
          <p class = 'biConfig_item_label'>label旋转角度</p>
          <el-input-number v-model = "formItemConfig.dataOptions.series[currentSeriesIndex].label.rotate"
          :min = '-90' :max = '90' :step = "1"></el-input-number>
        </div>
      </template>
    </el-collapse-item>
    <el-collapse-item title = '饼图设置' name = 'pieConfig'
    v-if = "formItemConfig.type === 'echarts_pie' && formItemConfig.dataOptions.series.length">
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>饼图类型</p>
        <el-select v-model = "formItemConfig.dataOptions.series[0].roseType">
          <el-option label = '饼图' :value = 'false'></el-option>
          <el-option label = '南丁格尔图' value = 'radius'></el-option>
        </el-select>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>饼图中心</p>
        <el-row>
          <el-col :span = '11'>
            <el-input v-model = "formItemConfig.dataOptions.series[0].center[0]"></el-input>
          </el-col>
          <el-col :offset = '2' :span = '11'>
            <el-input v-model = "formItemConfig.dataOptions.series[0].center[1]"></el-input>
          </el-col>
        </el-row>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>饼图半径</p>
        <el-row>
          <el-col :span = '11'>
            <el-input v-model = "formItemConfig.dataOptions.series[0].radius[0]"></el-input>
          </el-col>
          <el-col :offset = '2' :span = '11'>
            <el-input v-model = "formItemConfig.dataOptions.series[0].radius[1]"></el-input>
          </el-col>
        </el-row>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>是否显示label</p>
        <div><el-switch v-model = "formItemConfig.dataOptions.series[0].label.show"></el-switch></div>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>label字体大小</p>
        <el-input-number v-model = "formItemConfig.dataOptions.series[0].label.fontSize"
        :min = '12' :max = '32' :step = "1"></el-input-number>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>label字体颜色</p>
        <el-color-picker v-model = "formItemConfig.dataOptions.series[0].label.color"></el-color-picker>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>label格式化</p>
        <el-input v-model = "formItemConfig.dataOptions.series[0].label.formatter"></el-input>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>label位置</p>
        <el-select v-model = "formItemConfig.dataOptions.series[0].label.position">
          <el-option label = 'outside' value = 'outside'></el-option>
          <el-option label = 'inside' value = 'inside'></el-option>
          <el-option label = 'inner' value = 'inner'></el-option>
          <el-option label = 'center' value = 'center'></el-option>
        </el-select>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>是否显示label引导线</p>
        <div><el-switch v-model = "formItemConfig.dataOptions.series[0].labelLine.show"></el-switch></div>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>label引导线颜色</p>
        <el-color-picker v-model = "formItemConfig.dataOptions.series[0].labelLine.lineStyle.color"></el-color-picker>
      </div>
      <div class = 'biConfig_item'>
        <p class = 'biConfig_item_label'>图例颜色设置</p>
        <el-table :data = 'formItemConfig.dataOptions.series[0].data' style = "width:100%;" :height = '260' border stripe>
          <el-table-column align = "center" label = '名称'>
            <template slot-scope = "scope">
              <span>{{scope.row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column align = "center" label = '颜色'>
            <template slot-scope = "scope">
              <el-color-picker v-model = "scope.row.itemStyle.color"></el-color-picker>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-collapse-item>
  </el-collapse>
</template>

<script src = './biConfig.js'></script>

<style lang = "scss">
  .bi_configCollapse {
    .el-collapse-item__header {
      background-color: #e0e5f0;
      font-size: 16px;
      color: #000;
    }
  }
  .biConfig_item {
    width: 100%;
    margin-bottom: 10px;
    .biConfig_item_label {
      font-size: 14px;
    }
    .biConfig_itemFlex {
      width: 100%;
      height: 40px;
      padding-top: 5px;
      .biConfig_item_label {
        line-height: 28px;
      }
      .biConfig_itemFlex_btn {
        float: right;
        .el-button--mini {
          padding: 6px 12px;
        }
      }
    }
    .biConfig_columns {
      width: 100%;
      li {
        margin-bottom: 5px;
        line-height: 32px;
      }
      .biConfig_columns_btn {
        float: right;
      }
      .biConfig_columns_input {
        margin-right: 50px;
      }
    }
  }
</style>
